<template>
  <LeftTree
    ref="leftTree"
    :handleEdit="handleEdit"
    :getListFn="commonService.getAllDictionaryList"
    :rowClick="rowClick"
    type="types"
    :showall="showall"
    :selectItem="form"
    v-model:searchParams="searchParams"
  >
    <template #title> 类型 </template>
    <template #input>
      <el-row :gutter="10">
        <el-col :span="11">
          <el-input v-model="searchParams.dictionaryKey" placeholder="请输入键"
        /></el-col>
        <el-col :span="13">
          <el-input
            v-model="searchParams.dictionaryName"
            placeholder="请输入类型名称"
        /></el-col>
      </el-row>
    </template>
    <template #button>
      <el-button
        style="width: 100%; margin-top: 10px"
        type="primary"
        @click="handleEdit({})"
      >
        <el-icon><Plus /></el-icon>
        添加类型
      </el-button>
    </template>
    <template #table>
      <el-table-column prop="dictionaryKey" label="键" />
      <el-table-column prop="dictionaryName" label="类型名称" />
    </template>
  </LeftTree>
  <TypesListForm
    v-if="visibleTypesListForm"
    v-model:dialogVisible="visibleTypesListForm"
    :item="item"
    :showall="showall"
    :handleSearch="handleSearch"
  ></TypesListForm>
</template>

<script setup lang="ts">
import TypesListForm from './TypesListForm.vue'
import LeftTree from '../leftTreeSlot.vue'
import { commonService } from '@/api/common'
import { Debounce } from '@/hooks/throttle'

const searchParams = ref({
  dictionaryKey: '',
  dictionaryName: '',
})

const visibleTypesListForm = ref(false)
const props = defineProps({
  search: {
    type: Function,
  },
  form: {
    type: Object,
  },
  showall:{
    type: Boolean,
    default: true,
  }
})
const leftTree = ref(null)
const item = ref({})
const handleSearch = () => {
  leftTree.value.getCateList()
}
watch(
  () => searchParams.value,
  Debounce((val) => {
    handleSearch()
  }, 1000),
  { deep: true }
)
const handleEdit = (e) => {
  visibleTypesListForm.value = true
  item.value = e
}
const rowClick = (e) => {
  props.form.dictionaryKey = e?.dictionaryKey || '',
  props.form.dictionaryId=e?.dictionaryId||'',
  props.search()
}
</script>
